<template>
    <div id="box">
        <div id="header">
            <input type="checkbox" v-model="checkedAll" @click="checkAll">
        </div>
        <ul>
            <li v-for="(item, index) in datas" :key="item.id">
                <input type="checkbox" v-model="item.isChecked">
                <span>{{ item.goodName }}</span>
                <button class="btn" @click="item.count = item.count > 0 ? item.count - 1 : 0">-</button>
                <input type="text" v-model="item.count" class="input">
                <button class="btn" @click="item.count++">+</button>
                <span>{{ item.price }}</span>
                <span>{{ item.count * item.price }}</span>
                <span @click="del(index)">删除</span>
            </li>
        </ul>
        <div id="bottom">
            <span @click="delSelect">删除所选</span>
            <span>{{ countAll }}</span>
            <span>{{ countPriceAll }}</span>
            <span @click="clearAll">清空所有</span>
        </div>
    </div>
</template>

<script>
import { computed } from 'vue';

export default {
    data() {
        return {
            datas: [
                { id: 1, isChecked: false, goodName: '红米', count: 1, price: 1700 },
                { id: 2, isChecked: true, goodName: 'iqoo', count: 1, price: 2700 },
            ],
            checkedAll: false,
        };
    },
    methods: {
        // 全选
        checkAll() {
            this.checkedAll = !this.checkedAll;
            this.datas.forEach(item => {
                item.isChecked = this.checkedAll;
            });
        },
        // 删除单个商品
        del(index) {
            this.datas.splice(index, 1);
        },
        // 删除选中的商品
        delSelect() {
            this.datas = this.datas.filter(item => !item.isChecked);
        },
        // 清空所有商品
        clearAll() {
            this.datas = [];
        },
    },
    watch: {
        // 监听数据变化
        datas: {
            handler() {
                // 监听数据变化，判断是否全选
                this.checkedAll = this.datas.every(item => item.isChecked);
            },
            deep: true, // 深度监听
        },
    },
    computed: {
        // 计算被勾选商品数量
        countAll() {
            let newCount = 0
            let data = []
            data = this.datas.filter(item => item.isChecked)         
            data.forEach((item) => {
                newCount += item.count
            })
            return newCount
        },
        // 计算被勾选的商品总价格
        countPriceAll(){
            let newPrice = 0
            let data = []
            data = this.datas.filter(item => item.isChecked)         
            data.forEach((item) => {
                newPrice += (item.price * item.count)
            })
            return newPrice
        },
    }
}
</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#box {
    width: 300px;
}

ul li {
    display: flex;
    justify-content: space-between;
}

#bottom {
    display: flex;
    justify-content: space-between;
}

.input {
    width: 20px;
}

.btn {
    width: 20px;
}
</style>